<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div class="app-container">
      <el-card
        shadow="never"
        class="order-box"
      >
        <el-form
          :inline="true"
          label-width="100px"
          :model="order"
        >
          <!-- 第一行 -->
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="订单编号："
                prop="id"
              >
                <el-input
                  v-model="order.id"
                  placeholder="请输入订单编号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="订单状态："
                prop="status"
              >
                <el-select v-model="order.status">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-row :gutter="5">
                <el-col :span="6">
                  <el-form-item
                    label="付费状态："
                    prop="paymentStatus"
                  >
                  </el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-select v-model="order.paymentStatus">
                    <el-option
                      v-for="item in senderProvince"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="发件人姓名："
                prop="senderName"
              >
                <el-input
                  v-model="order.senderName"
                  placeholder="请输入发件人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="发件人电话："
                prop="senderPhone"
              >
                <el-input
                  v-model="order.senderPhone"
                  placeholder="请输入发件人电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-row :gutter="5">
                <el-col :span="6">
                  <el-form-item label="发件人地址：">
                  </el-form-item>
                </el-col>
                <!-- 发件人省 -->
                <el-col :span="6">
                  <el-select
                    v-model="order.senderProvinceId"
                    @click.native.stop="getSendProvide"
                  >
                    <el-option
                      v-for="item in sendProvide"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <!-- 发件人市 -->
                <el-col :span="6">
                  <el-select
                    v-model="order.senderCityId"
                    @click.native.stop="getSendCity"
                  >
                    <el-option
                      v-for="item in sendCity"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <!-- 发件人区域 -->
                <el-col :span="6">
                  <el-select
                    v-model="order.senderCountyId"
                    @click.native.stop="getSendCount"
                  >
                    <el-option
                      v-for="item in sendArea"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="收件人姓名："
                prop="receiverName"
              >
                <el-input
                  v-model="order.receiverName"
                  placeholder="请输入收件人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="收件人电话："
                prop="receiverPhone"
              >
                <el-input
                  v-model="order.receiverPhone"
                  placeholder="请输入收件人电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-row :gutter="5">
                <el-col :span="6">
                  <el-form-item label="收件人地址：">
                  </el-form-item>
                </el-col>
                <!-- 取件人省 -->
                <el-col :span="6">
                  <el-select
                    v-model="order.receiverProvinceId"
                    @click.native.stop="getReceiveProvide"
                  >
                    <el-option
                      v-for="item in receiverPrvide"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <!-- 取件人市 -->
                <el-col :span="6">
                  <el-select
                    v-model="order.receiverCityId"
                    @click.native.stop="getReceiveCity"
                  >
                    <el-option
                      v-for="item in receiverCity"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <!-- 取件人区域 -->
                <el-col :span="6">
                  <el-select
                    v-model="order.receiverCountyId"
                    @click.native.stop="getReceiverArea"
                  >
                    <el-option
                      v-for="item in receiverArea"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- 按钮 -->
          <el-form>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-button
                  type="warning"
                  @click="handleFilter"
                >搜索</el-button>
                <el-button
                  type="warning"
                  plain
                  @click="resetForm"
                >重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-form></el-card>
      <!-- 详情 -->
      <el-card
        shadow="never"
        style="margin-top: 20px"
      >
        <template>
          <el-table
            v-loading="isloading"
            :data="list"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column
              type="index"
              :index="indexMethod"
              label="序号"
              width="80"
            >
            </el-table-column>
            <el-table-column
              prop="memberId"
              label="订单编号"
              width="160"
            >
            </el-table-column>
            <el-table-column
              prop="transportOrder.id"
              label="运单编号"
              width="140"
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="下单时间"
              width="150"
            >
            </el-table-column>

            <!-- 单独处理 -->
            <el-table-column
              prop="status"
              :formatter="statusType"
              label="订单状态"
              width="80"
            >
            </el-table-column>
            <el-table-column
              prop="senderName"
              label="发件人姓名"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="senderPhone"
              label="发件人电话"
              width="120"
            >
            </el-table-column>

            <el-table-column
              label="发件人地址"
              width="150"
            >
              <template #default="{ row }">
                {{ senderAddress(row) }}
              </template>
            </el-table-column>

            <el-table-column
              prop="receiverName"
              label="收件人姓名"
              width="120"
            >

            </el-table-column>
            <el-table-column
              prop="receiverPhone"
              label="收件人电话"
              width="120"
            >
            </el-table-column>

            <el-table-column
              label="收件人地址"
              width="140"
            >
              <template #default="{ row }">
                {{ receiverAddress(row) }}

              </template></el-table-column>

            <!-- 单独处理 -->
            <el-table-column
              prop="pickupType"
              :formatter="pickupType"
              label="取件类型"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="paymentMethod"
              :formatter="paymentMethod"
              label="付费类型"
              width="120"
            >
            </el-table-column>

            <el-table-column
              prop="paymentStatus"
              :formatter="paymentStatus"
              label="付费状态"
              width="120"
            >
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="100"
            >
              <template #default="{ row }">
                <el-button
                  type="text"
                  size="small"
                  @click="$router.push(`/business/edit-order?id=${row.id}`)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页组件 -->
        <div class="pagination">
          <el-pagination
            :current-page="page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { orderList } from '@/api/order'
import { areaList } from '@/api/common'
export default {
  data() {
    return {
      isloading: false,
      currentPage1: 5,
      list: [],
      page: 1,
      pageSize: 10,
      total: 40,
      payStatusSelect: '',
      sendersName: '',
      sendersMobile: '',
      receiversName: '',
      receiversMobile: '',
      // 省市区
      sendProvide: {
        id: ''
      },
      receiverPrvide: {
        id: ''
      },
      sendCity: {},
      receiverCity: {},
      sendArea: {},
      receiverArea: {},
      // 搜索
      transportOrder: {
        id: ''
      },
      status: '',

      // 付费状态
      senderProvince: [
        {
          id: 1,
          name: '未付'
        },
        {
          id: 2,
          name: '已付'
        }
      ],
      // 订单状态
      statusOptions: [
        {
          id: 23000,
          name: '待取件'
        },
        {
          id: 23001,
          name: '已取件'
        },
        {
          id: 23002,
          name: '网点自寄'
        },
        {
          id: 23003,
          name: '网点入库'
        },
        {
          id: 23004,
          name: '待装车'
        },
        {
          id: 23005,
          name: '运输中'
        },
        {
          id: 23006,
          name: '网点出库'
        },
        {
          id: 23007,
          name: '待派送'
        },
        {
          id: 23008,
          name: '派送中'
        },
        {
          id: 23009,
          name: '已签收'
        },
        {
          id: 23010,
          name: '拒收'
        },
        {
          id: 23011,
          name: '已取消'
        }

      ],
      order: {
        transportOrder: '',
        status: '',
        paymentStatus: '',
        receiverName: '',
        receiverPhone: '',
        senderName: '',
        senderPhone: '',
        receiverCity: '',
        receiverCounty: '',
        receiverProvince: '',
        senderProvince: '',
        senderCity: '',
        senderCounty: '',
        id: ``
      }
    }
  },
  created() {
    this.isloading = true
    this.getorderList()
    this.handleFilter()
    this.isloading = false
  },
  methods: {
    // 确认按钮
    async handleFilter() {
      this.page = 1
      this.searchkey = true
      const page = { page: this.page, pageSize: this.pageSize }
      const data = Object.assign(page, this.order)
      const res = await orderList(data)
      console.log(res)
      this.list = res.data.items
    },
    // 重置
    resetForm() {
      this.order = {
        transportOrder: '',
        status: '',
        paymentStatus: '',
        receiverName: '',
        receiverPhone: '',
        senderName: '',
        senderPhone: '',
        receiverCity: '',
        receiverCounty: '',
        receiverProvince: '',
        senderProvince: '',
        senderCity: '',
        senderCounty: '',
        id: ``
      }
    },
    // 获取省份
    async getSendProvide() {
      const res = await areaList(this.sendProvide)
      console.log(res)
      this.sendProvide = res.data
    },
    async getReceiveProvide() {
      const res = await areaList(this.receiverPrvide)
      this.receiverPrvide = res.data
    },
    // 获取城市
    async getSendCity() {
      const data = {
        parentId: this.sendProvide.id
      }
      console.log(data)
      const res = await areaList(data)
      this.sendCity = res.data
    },
    async getReceiveCity() {
      const data = {
        parentId: this.receiverPrvide.id
      }
      // console.log(data)
      const res = await areaList(data)
      this.receiverCity = res.data
    },
    // 获取区域
    // 寄件人
    async getSendCount() {
      const data = {
        parentId: this.sendCity.id
      }
      const res = await areaList(data)
      this.sendArea = res.data
    },
    // 取件人
    async getReceiverArea() {
      const data = {
        parentId: this.receiverCity.id
      }
      console.log(data)
      const res = await areaList(data)
      this.receiverArea = res.data
    },
    // 收件人地址
    receiverAddress(addr) {
      const receiverAddress = `${addr.receiverProvince.name} ${addr.receiverCity.name} ${addr.receiverProvince.name} ${addr.receiverCounty
        .name} ${addr.receiverAddress}`
      return receiverAddress
    },
    // 发件人地址
    senderAddress(addr) {
      const senderaddrs = `${addr.senderProvince.name} ${addr.senderCity.name} ${addr.senderCounty.name} ${addr.senderAddress}`
      return senderaddrs
    },
    // 取件类型
    pickupType(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      if (cellValue === 1) {
        return '网点自寄'
      } else if (cellValue === 2) {
        return '上门取件'
      }
    },
    // 付款类型
    paymentMethod(row, column, cellValue, index) {
      if (cellValue === 1) {
        return '预结'
      } else if (cellValue === 2) {
        return '到付'
      }
    },
    // 付款状态
    paymentStatus(row, column, cellValue, index) {
      if (cellValue === 1) {
        return '未付'
      } else if (cellValue === 2) {
        return '已付'
      }
    },
    // 订单状态
    statusType(row, column, cellValue, index) {
      if (cellValue === 23000) {
        return '待取件'
      } else if (cellValue === 23001) {
        return '已取件'
      } else if (cellValue === 23002) {
        return '网点自寄'
      } else if (cellValue === 23003) {
        return '网点入库'
      } else if (cellValue === 23004) {
        return '待装车'
      } else if (cellValue === 23005) {
        return '运输中'
      } else if (cellValue === 23006) {
        return '网点出库'
      } else if (cellValue === 23007) {
        return '待派送'
      } else if (cellValue === 23008) {
        return '派送中'
      } else if (cellValue === 23009) {
        return '已签收'
      } else if (cellValue === 23010) {
        return '拒收'
      } else if (cellValue === 230011) {
        return '已取消'
      }
    },

    /* 分页功能 */
    handleSizeChange(val) {
      // console.log(`每页${val}条`)
      // 更新每页条数
      this.pageSize = val
      // 重置当前页
      this.page = 1
      this.getorderList()
    },

    // 页码变化时，触发的事件
    handleCurrentChange(val) {
      // console.log(`当前是第${val}页`)
      this.page = val
      this.getorderList()
    },
    indexMethod(index) {
      return (this.page - 1) * this.pageSize + index + 1
    },
    // 获取列表
    async getorderList() {
      this.isloading = true
      const { data: { items, counts }} = await orderList({
        page: this.page,
        pageSize: this.pageSize
      })
      this.total = +counts
      // console.log(this.total)
      this.list = items
      this.isloading = false
      // console.log(items)
      // console.log(this.list)
    }
    // async getProvince () {
    //   const res = await getProvinceApi
    //   console.log(res, '123')
    // }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}

.pagination {
  margin-top: 40px;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
